// 管理员列表
import { Table, Form, Input, Button, Tooltip, Space,Modal,message } from 'antd';
import {
  SearchOutlined,
  DeleteOutlined,
  PlusOutlined,
  AppstoreOutlined,
  SyncOutlined,
  EditOutlined,
  ExclamationCircleOutlined
} from '@ant-design/icons';
import './index.less';
import { Key, useEffect, useState } from 'react';
import { SysUserModelState, useDispatch, useSelector } from 'umi';
export default function SysUser() {
  const [select, setSelect] = useState<string[]>([]);
  const [isShow, setIsShow] = useState(true);
  const [form] = Form.useForm();
  const { confirm } = Modal;
  const columns: any[] = [
    {
      key: 'username',
      title: '用户名',
      dataIndex: 'username',
      width: 158,
      align: 'center',
    },
    {
      key: 'email',
      title: '邮箱',
      dataIndex: 'email',
      width: 158,
      align: 'center',
    },
    {
      key: 'mobile',
      title: '手机号',
      dataIndex: 'mobile',
      width: 158,
      align: 'center',
    },
    {
      key: 'createTime',
      title: '创建时间',
      dataIndex: 'createTime',
      width: 158,
      align: 'center',
    },
    {
      key: 'status',
      title: '状态',
      dataIndex: 'status',
      width: 158,
      align: 'center',
      render: (text: string) => {
        {
          text = text == '1' ? '正常' : '禁用';
        }
        return <div>{text}</div>;
      },
    },
    {
      key: 'action',
      title: '操作',
      width: 200,
      dataIndex: 'action',
      align: 'center',
      render: (text:any,record:any,index:any) => (
        <Space size="middle">
          <Button type="primary" icon={<EditOutlined />}>
            修改
          </Button>
          <Button type="primary" danger icon={<DeleteOutlined />} onClick = {() => {
              confirm({
                title: '您确定要删除?',
                icon: <ExclamationCircleOutlined />,
                content: '删除后无法恢复',
                onOk() {
                  console.log('确定',record);
                  let newArr = [];
                  newArr.push(record.userId);
                  dispatch({
                    type:"SysUser/SysUserDelete",
                    payload:newArr
                  });
                  message.success("删除成功")
                },
                onCancel() {
                  console.log('Cancel');
                  message.error("删除失败")
                },
              });
              
            }}> 
            删除
          </Button>
        </Space>
      ),
    },
  ];
  const dispatch = useDispatch();
  useEffect(() => {
    dispatch({
      type: 'SysUser/getUserList',
    });
  }, []);
  const { SysUserList } = useSelector(
    (state: { SysUser: SysUserModelState }) => state.SysUser,
  );
  console.log('SysUserList......', SysUserList);

  const onChangeLenth = (ids: Key[]) => {
    console.log('111', ids);

    setSelect(ids as string[]);
  };
  const onShow = () => {
    setIsShow(!isShow);
  };
  const onFinish = (values:any)=>{
    console.log(values,"111111");
    dispatch({
      type:"SysUser/getUserSearch",
      payload:values
    })
  }
  const onReset = ()=>{
    form.resetFields();
      // 重新请求数据
      dispatch({
        type: 'SysUser/getUserList',
      });
      // 刷新页面
      window.location.reload();
  }
  return (
    <div className="sys-user">
      {isShow ? (
        <Form layout="inline" onFinish={onFinish} form = {form}>
          <Form.Item label="用户名" name="username">
            <Input placeholder="用户名" />
          </Form.Item>
          <Form.Item>
            <Button type="primary" icon={<SearchOutlined />} htmlType = "submit">
              搜索
            </Button>
          </Form.Item>
          <Form.Item>
            <Button icon={<DeleteOutlined />} type="primary" htmlType = "submit" onClick={onReset} >清空</Button>
          </Form.Item>
        </Form>
      ) : null}

      <div className="user">
        <div className="user-right">
          <Form layout="inline">
            <Form.Item>
              <Button type="primary" icon={<PlusOutlined />}>
                新建
              </Button>
            </Form.Item>
            <Form.Item>
              <Button
                type="primary"
                danger
                disabled={select.length ? false : true}
              >
                删除
              </Button>
            </Form.Item>
          </Form>
        </div>
        <div className="user-left">
          <Tooltip title="刷新">
            <Button
              shape="circle"
              icon={<SyncOutlined style={{ fontSize: '12px' }} />}
              size="large"
            />
          </Tooltip>
          <Tooltip title="显隐">
            <Button
              shape="circle"
              icon={<AppstoreOutlined style={{ fontSize: '12px' }} />}
              size="large"
            />
          </Tooltip>
          <Tooltip title="搜索">
            <Button
              shape="circle"
              icon={<SearchOutlined style={{ fontSize: '12px' }} />}
              size="large"
              onClick={onShow}
            />
          </Tooltip>
        </div>
      </div>
      <div className="userlist">
        <div className="claen">
          <div>当前表格已选择 {select.length} 项</div>&nbsp;<a>清空</a>
        </div>
        <Table
          bordered={true}
          columns={columns}
          dataSource={SysUserList}
          rowSelection={{ type: 'checkbox', onChange: onChangeLenth }}
        />
      </div>
    </div>
  );
}
